<template>
    <rx-dialog @ok="onOk" @cancel="onCancel">
        <rx-layout>
            <template #middle>
                <div style="padding: 10px" class="quick-box">
                    <a-form ref="form" layout="vertical" :model="mdl" :rules="rules">
                        <a-form-item :label="i18n('form.entryType','入口类型')" prop="type">
                            <a-radio-group v-model:value="mdl.type" @change="valueChange">
                                <a-radio value="menu">{{i18n('list.selectMenu','菜单')}} </a-radio>
                                <a-radio value="link">{{i18n('list.link','链接')}}</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <a-form-item :label="i18n('form.name','名称')" prop="name" v-if="mdl.type!='menu'">
                            <a-input v-model:value="mdl.name"></a-input>
                        </a-form-item>
                        <a-form-item :label="i18n('form.entry','入口')" prop="key">
                            <rx-input-button class="entry-box" v-if="mdl.type=='menu'" :singleValue="false"
                                             optionLabel="text" @btnClick="openMenuDialog"
                                             v-model="menuValue"></rx-input-button>
                            <a-input v-else v-model:value="mdl.key"></a-input>
                        </a-form-item>
                        <RxIconAndColor
                            ref="rxIconColor"
                            :system="mdl.background.type"
                            :bgColor="mdl.background.color"
                            :icon="mdl.background.icon"
                            :baseUrl="baseUrl"
                        ></RxIconAndColor>
                    </a-form>
                </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
/**
 * 选择快捷入口菜单的对话框
 */
import {Util, RxDialog, RxLayout, RxInputButton} from '@lowcode/jpaas-base-lib';
import MenuDialog from "./MenuDialog.vue"
import {RxIconAndColor} from "@lowcode/jpaas-share-component"

export default {
    name: "QuickEntranceDialog",
    components: {
        RxDialog,
        RxLayout,
        RxInputButton,
        RxIconAndColor
    },
    props: ["destroy", "config", "menus", "config"],
    data() {
        return {
            mdl: {
                type: "menu",
                name: "",
                key: "",
                background: {
                    type: "lineage",
                    color: "linear-gradient(0deg,#2b76f3 0%,#6db6fb 100%)",
                    icon: "icon-linebrush",
                }
            },
            rules: {
                key: [{required: true, message: "请选择入口", trigger: 'change'}],
            },
            menuValue: "",
            baseUrl: ''
        }
    },
    created() {
        this.baseUrl = import.meta.env.JPAAS_BASE_URL;
        this.init()
    },
    methods: {
        init() {
            let appId = Util.getUrlParam("appId");
            if (!appId) {
                this.mdl.type = 'link'
            }
            if (this.config) {
                this.mdl = JSON.parse(JSON.stringify(this.config))
                this.menuValue = JSON.stringify({text: this.config.name, value: this.config.key});
            }
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "quickEntrance", key);
        },
        valueChange(e) {
            this.mdl.name = "";
            this.mdl.key = "";
        },
        openMenuDialog(vm) {
            let self = this;
            let conf = {
                component: MenuDialog,
                title: this.i18n('list.selectMenu',"选择菜单"),
                widthHeight: ['810px', '600px'],
                curVm: this,
                zIndex: 9999,
                data: {menus: this.menus}
            };
            Util.open(conf, function (action, data) {
                if (action != "ok") {
                    return;
                }
                self.mdl.name = data.title;
                self.mdl.key = data.value;
                self.menuValue = JSON.stringify({text: data.title, value: data.value});
                self.mdl.background.icon=data.icon?JSON.parse(data.icon).icon:"";
                self.$refs.rxIconColor.setIcon(self.mdl.background.icon);
            });
        },
        onOk(e) {
            this.$refs.form.validate().then(() => {
                let value = this.$refs.rxIconColor.getData();
                if (value.bgColor) {
                    this.mdl.background['color'] = value.bgColor;
                }
                if (value.icon) {
                    this.mdl.background['icon'] = value.icon;
                }
                if (value.system) {
                    this.mdl.background['type'] = value.system;
                }
                Util.closeWindow(this, 'ok', this.mdl);
            }).finally(() => {
                e.loading = false;
            })
        },
        onCancel() {
            Util.closeWindow(this, 'cancel');
        }
    },
    watch: {},
}
</script>

<style scoped>
.entry-box ::v-deep(.ant-input-affix-wrapper-status-error) {
    border-color: red;
}
</style>
